<!DOCTYPE html>
<html lang="zh">

<head>
	<link rel="icon" href="https://qzonestyle.gtimg.cn/aoi/img/logo/favicon.ico">
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>QQ空间备份-视频</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.3.0/css/lightgallery.min.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/lightgallery/2.3.0/css/lightgallery-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="../Common/css/common.css">
	<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
	<script src="https://cdn.staticfile.org/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
	
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/lightgallery.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/zoom/lg-zoom.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/video/lg-video.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/thumbnail/lg-thumbnail.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/rotate/lg-rotate.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/hash/lg-hash.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/fullscreen/lg-fullscreen.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/comment/lg-comment.min.js"></script>
	<script src="https://cdn.staticfile.org/lightgallery/2.3.0/plugins/autoplay/lg-autoplay.min.js"></script>
	<script src="https://www.lvshuncai.com/custom/js/clicklove.min.js"></script>

	<script src="https://cdn.staticfile.org/jquery_lazyload/2.0.0-rc.2/lazyload.min.js"></script>
	<script src="https://fastly.jsdelivr.net/npm/template_js@2.2.1/dist/index.aio.min.js" integrity="sha256-gnK+GsIXEBgu/mJouMDtUxXvXM3M0jzxNYmjnlsifgY=" crossorigin="anonymous"></script>
	
	<script type="text/javascript" src="json/videos.js"></script>
</head>

<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
			<a class="navbar-brand" target="_blank" href="https://github.com/ShunCai/QZoneExport">QQ空间导出助手</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb bg-dark">
						<li class="breadcrumb-item"><a href="../index.html">个人中心</a></li>
						<li class="breadcrumb-item active" aria-current="page">视频</li>
					</ol>
				</nav>
			</div>
		</nav>
	</header>
	<main role="main">
		<div class="albums py-5 bg-light" style="padding-top: 4rem!important;">
			<div class="container-fluid tz-gallery">
				<div id="lightgallery" class="row videos">
					<%/* 遍历视频 */%>
					<%for (const video of videos) {%>
						<%video.uid = 'QZ-' + API.Utils.newSimpleUid(16)%>
						<div class="col-md-2 mb-2">
							<div class="card thumbnail mb-2 shadow-sm">
								<div id="<%:=video.uid%>" class='photo-detail' style="display:none">
									<div class="container">
										<div class="row">
											<div class="col text-white-50 text-left">
												<p>
													<i title="拍摄/上传时间" class="fa fa-camera text-primary"><%:=video.shootTime ? API.Utils.formatDate(video.shootTime) : API.Utils.formatDate(video.uploadTime)%></i>
													<i title="相片类型" class="ml-2">MP4</i>
												</p>
											</div>
											<div class="col text-center text-truncate">
												<h6 data-toggle="tooltip" data-html="true" title='<%:=API.Common.formatContent(video.name || API.Utils.formatDate(video.uploadTime))%>'><%:=API.Common.formatContent(video.name || API.Utils.formatDate(video.uploadTime))%></h6>
												<%if(video.desc){%>
													<span class="text-white-50" data-toggle="tooltip" data-html="true" title="<%:=API.Common.formatContent(video.desc, 'HTML', false, false)%>"><%:=API.Common.formatContent(video.desc, "HTML", false, false)%></span>
												<%}%>
											</div>
											<div class="col"></div>
										</div>
									</div>
								</div>
								<a class="lightbox" data-video='{"source": [{"src":"<%:=(video.custom_filepath || video.custom_url || video.url)%>", "type":"video/mp4"}],"attributes": {"preload": false, "controls": true}}' 
									data-poster="<%:=API.Common.getMediaPath(video.pre || video.custom_pre_url, video.custom_pre_filepath)%>" data-toggle="tooltip" data-html="true" title="<%:=video.desc || video.name%>" data-sub-html="#<%:=video.uid%>">
									<span class="photo-video"></span>
									<img class="lazyload loading" src="../Common/images/loading.gif" data-src="<%:=API.Common.getMediaPath(video.pre || video.custom_pre_url, video.custom_pre_filepath)%>" />
								</a>
								<div class="card-body text-truncate">
									<span class="card-title" data-toggle="tooltip" data-html="true" title="<%:=API.Common.formatContent(video.desc || API.Utils.formatDate(video.uploadTime)) %>"><%:=API.Common.formatContent(video.desc || API.Utils.formatDate(video.uploadTime)) %></span>
								</div>
								<div class="pic-num-wrap d-flex justify-content-around">
									<div class="align-self-end">
										<span class="text-light fa fa-thumbs-o-up cursor viewlikes" title="查看点赞" data-field="uniKey" data-target="<%:=video.uniKey%>" ><%:=video.likes ? video.likes.length : 0%></span>
									</div>
									<div class="align-self-end">
										<span class="text-light fa fa-comments-o cursor viewcomments" title="查看评论" data-field="uniKey" data-target="<%:=video.uniKey%>"><%:=video.comments ? video.comments.length : 0%></span>
									</div>
								</div>
							</div>
						</div>
					<%}%>
				</div>
			</div>
		</div>
	</main>
	<script type="text/javascript">
		// 当前年份
		window.targetYear = "<%:=targetYear || 'ALL'%>";
	</script>
	<script type="text/javascript" src="../Common/js/common.js"></script>
	<script type="text/javascript" src="js/videos.js"></script>
</body>

</html>